<template>
    <div>
        <div>获取Vuex的 vuexStoreCount: {{ vuexStoreCount }}</div>
        <div>获取Vuex的 vuexStoreCountFormat: {{ vuexStoreCountFormat }}</div>
        <div>获取Vuex的 vuexStoreCountFormatPlus: {{ vuexStoreCountFormatPlus }}</div>
        <div>
            <button @click="increase">+1</button>
            <button @click="decrease">-1</button>
            <button @click="increaseByParams">+10</button>
            <button @click="asyncIncrease">异步+1</button>

        </div>
    </div>
</template>
<script>
    export default {
        components: {

        },
        props: {

        },
        data () {
            return {
                asyncCount: 0
            }
        },
        mounted(){

        },
        /**
         * 计算属性
         */
        computed: {
            vuexStoreCount() {
                return this.$store.state.vuexStoreCount;
            },
            vuexStoreCountFormat() {
                return this.$store.getters.vuexStoreCountFormat;
            },
            vuexStoreCountFormatPlus() {
                return this.$store.getters.vuexStoreCountFormatPlus;
            }
        },
        methods: {
            increase() {
                this.$store.commit('increment');
            },
            decrease() {
                this.$store.commit('decrease');
            },
            increaseByParams() {
                this.$store.commit({
                    type: 'incrementByParams',
                    count: 10
                });
            },
            asyncIncrease() {
                this.$store.dispatch('asyncIncrease').then(() => {
                    this.asyncCount = this.$store.state.vuexStoreCount;
                })
            }
        }
    }
</script>
<style scoped>

</style>